<template>
  <view class="tab-bar">
    <view class="tab-item" @click="switchTab('/pages/index/index')">
      <image class="tab-icon" :src="currentPath === '/pages/index/index' ? '/static/tabbar/home-active.png' : '/static/tabbar/home.png'"></image>
      <text class="tab-text" :class="{ active: currentPath === '/pages/index/index' }">首页</text>
    </view>
    <view class="tab-item" @click="switchTab('/pages/project/project-detail')">
      <image class="tab-icon" :src="currentPath === '/pages/project/project-detail' ? '/static/tabbar/project-active.png' : '/static/tabbar/project.png'"></image>
      <text class="tab-text" :class="{ active: currentPath === '/pages/project/project-detail' }">项目</text>
    </view>
    <view class="tab-item publish">
      <view class="publish-btn" @click="switchTab('/pages/bid/bid-publish')">
        <image class="publish-icon" src="/static/tabbar/plus.png"></image>
      </view>
    </view>
    <view class="tab-item" @click="switchTab('/pages/message/message-list')">
      <image class="tab-icon" :src="currentPath === '/pages/message/message-list' ? '/static/tabbar/message-active.png' : '/static/tabbar/message.png'"></image>
      <text class="tab-text" :class="{ active: currentPath === '/pages/message/message-list' }">消息</text>
    </view>
    <view class="tab-item" @click="switchTab('/pages/profile/profile')">
      <image class="tab-icon" :src="currentPath === '/pages/profile/profile' ? '/static/tabbar/profile-active.png' : '/static/tabbar/profile.png'"></image>
      <text class="tab-text" :class="{ active: currentPath === '/pages/profile/profile' }">我的</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const currentPath = ref('');

onMounted(() => {
  // Get current page path
  const pages = getCurrentPages();
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1];
    currentPath.value = '/' + currentPage.route;
  }
});

const switchTab = (url) => {
  uni.switchTab({
    url: url
  });
  currentPath.value = url;
};
</script>

<style>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  z-index: 999;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 10rpx;
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
}

.tab-text {
  font-size: 22rpx;
  color: #7A7E83;
}

.tab-text.active {
  color: #1d4ed8;
}

.publish {
  position: relative;
}

.publish-btn {
  position: absolute;
  width: 100rpx;
  height: 100rpx;
  background-color: #1d4ed8;
  border-radius: 50%;
  bottom: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.publish-icon {
  width: 40rpx;
  height: 40rpx;
}
</style> 